<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/joint.css"/>
        <!--		<script src="../../src/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>-->
        <!--		<script src="js/lodash.js" type="text/javascript" charset="utf-8"></script>-->
        <!--		<script src="js/backbone.js" type="text/javascript" charset="utf-8"></script>-->
        <!--		<script src="js/joint.js" type="text/javascript" charset="utf-8"></script>-->
        <!--		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>-->
        
        
        <link rel="stylesheet" type="text/css" href="../../src/joint-2.2.1.css">
        <!-- 下面的顺序不能变 -->
        <script type="text/javascript" src="../../src/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="../../src/lodash-4.17.11.js"></script>
        <script type="text/javascript" src="../../src/backbone-1.3.3.js"></script>
        <script type="text/javascript" src="../../src/joint-2.2.1.min.js"></script>
        
        
        <style type="text/css">
            .left {
                float: left;
                height: 100%;
                width: 20%;
            }
            
            html,
            body,
            #paper {
                height: 100%;
                width: 100%;
            }
            
            #paper {
                position: absolute;
                top: 0;
            }
            
            p {
                margin: 50px 0;
            }
        </style>
    </head>
    
    <body>
        <div id="paper" class="paper"></div>
        <div class="box"></div>
        <script type="text/javascript">
            var graph = new joint.dia.Graph();
            //定义画布
            var paper = new joint.dia.Paper({
                el: $('#paper'),
                width: 1200,
                height: 600,
                gridSize: 1,
                model: graph
            });
            paper.$el.css('pointer-events', 'none')
            //定义形状
            var stat33 = function (x, y, shape, background, text) {
                var cell;
                if (shape === "rect") {
                    cell = new joint.shapes.basic.Rect({
                        position: {
                            x: x,
                            y: y
                        }, //坐标
                        size: {
                            width: 140,
                            height: 40
                        }, //宽高
                        attrs: {
                            rect: {
                                fill: {
                                    type: 'linearGradient',
                                    stops: [{
                                        offset: '0%',
                                        color: background
                                    }, //渐变开始
                                        {
                                            offset: '100%',
                                            color: background
                                        }
                                    ], //渐变结束
                                    attrs: {
                                        x1: '0%',
                                        y1: '0%',
                                        x2: '0%',
                                        y2: '100%'
                                    }
                                },
                                stroke: background, //边框颜色
                                'stroke-width': 1 //边框大小
                            },
                            text: {
                                text: text,
                                'ref-x': .5,
                                'ref-y': .5,
                                fill: '#000'
                            }, //显示文字
                        }
                    });
                } else if (shape === "ellipse") {
                    cell = new joint.shapes.basic.Ellipse({
                        position: {
                            x: x,
                            y: y
                        }, //坐标
                        size: {
                            width: 140,
                            height: 40
                        }, //宽高
                        attrs: {
                            ellipse: {
                                fill: {
                                    type: 'linearGradient',
                                    stops: [{
                                        offset: '0%',
                                        color: background
                                    }, //渐变开始
                                        {
                                            offset: '100%',
                                            color: '#FFFFFF'
                                        } //渐变结束
                                    ],
                                    attrs: {
                                        x1: '0%',
                                        y1: '0%',
                                        x2: '0%',
                                        y2: '100%'
                                    }
                                },
                                stroke: background, //边框颜色
                                'stroke-width': 1 //边框大小
                            },
                            text: {
                                text: text,
                                'ref-x': .5,
                                'ref-y': .5,
                                fill: '#000'
                            }, //显示文字
                        }
                    });
                }
                graph.addCell(cell);
                return cell;
            };
            
            //定义连线
            function link(source, target, label) {
                var cell = new joint.dia.Link({
                    source: {
                        id: source.id
                    },
                    target: {
                        id: target.id
                    },
                    labels: [{
                        position: 0.5,
                        attrs: {
                            text: {
                                text: label || '',
                                'font-weight': 'bold'
                            }
                        }
                    }],
                    
                    attrs: {
                        '.connection': {
                            stroke: '#333333', //连线颜色
                            'stroke-width': 4 //连线粗细
                        },
                        '.marker-target': {
                            fill: '#000', //箭头颜色
                            d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
                        }
                    }
                });
                graph.addCell(cell);
                return cell;
            }
            
            var data = [
                [{
                    title: '订单',
                    tolink: "",
                    state: "1",
                    id: "1",
                    name: '订单'
                }],
                [{
                    title: '预售',
                    tolink: "1",
                    state: "1",
                    id: "2",
                    name: '预售'
                }, {
                    title: '预售2',
                    tolink: "1",
                    state: "0",
                    id: "3",
                    name: '预售2'
                }],
                [{
                    title: '采购清单',
                    tolink: "2",
                    state: "-1",
                    id: "4",
                    name: '采购清单'
                }, {
                    title: '待加工',
                    tolink: "2",
                    state: "-1",
                    id: "5",
                    name: '待加工'
                }]
            ]
            
            console.log(data)
            var arraylist = [];
            $.each(data, function (index, item1) {
                $(".box").append("<div class='left'></div>")
                
                $.each(item1, function (index2, item2) {
                    
                    $(".left").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")
                    debugger
                    var id1 = item1[index2].id
                    var arrValue1 = arraylist[id1];
                    var y = $("#" + id1).offset().top;
                    var x = $("#" + id1).offset().left;
                    var name = item1[index2].name
                    var n = item1[index2].state
                    if (arrValue1 == undefined) {
                        
                        switch (n) {
                            case "1":
                                arraylist[id1] = stat33(x, y, "rect", "#99ff00", name);
                                break;
                            case "0":
                                arraylist[id1] = stat33(x, y, "rect", "#FFFF00", name);
                                break;
                            default:
                                arraylist[id1] = stat33(x, y, "rect", "red", name);
                            
                        } 
                    }
                    if (item1[index2].tolink != "") {
                        var id2 = item1[index2].tolink
                        var arrValue2 = arraylist[id2];
                        var y2 = $("#" + id2).offset().top;
                        var x2 = $("#" + id2).offset().left;
                        var state = item1[index2].state
                        if (arrValue2 == undefined) {
                            arraylist[id2] = stat33(x2, y2, "rect", "#000");
                        }
                        link(arraylist[id2], arraylist[id1]);
                    }
                    
                });
                
            });
        </script>
    </body>

</html>